@charset "utf-8";
/*外部CSS文件，第一行：控制乱码*/
/* 第二行：设置通用样式 */
*{
	/*所有元素存在盒模型：内外边距+边框+内容组成
	但是，有些元素默认自带外边距:body、p、ul/ol
	*/
   margin: 0;
   padding: 0;
   /*文字：家族、尺寸*/
   font-family: "华文彩云";
   font-size: 80px;
}
/*测试：外部css文件是否关联！  添加背景*/
body{
	background-color: #ff0;
	/*背景属性【复合属性】： 可以省略属性值的属性
	属性值： image, origin 与 size, repeat , color;
	常用背景属性： url()  repeat;
	子属性与主属性使用一致！
	子属性：background-color  背景颜色
	       background-image  背景图片  属性值：url(图片路径)、url("",'')
	       background-size   背景尺寸 ：宽  高
		   background-repeat 背景平铺  no-repeat
	注意：设置背景图之后立即加背景图高宽！	   
	背景属性与图片元素区别？
	背景属性，频繁移动的元素
	图片元素，出现固定在页面
	 */
	background: #f00; 
	background-image: url(../img/bg.jpg); /*背景图*/
	background-repeat: no-repeat;
	background: url(../img/bg.jpg) no-repeat;
	background-size: 100% 638px;
}
/*熊*/
.bear{
	width: 200px;
	height: 300px;
	/*验证选择器是否选中*/
	bor der: 1px solid red;
	background: url(../img/bear_1.png);
	background-size: 100% 100%;
	position: relative;
	left: 10px;
	top: -67px;
	/*熊div元素添加动画：启动关键帧*/
	animation: bear 10s linear infinite;
}

/* 1个动画：创建1个关键帧：特点：具体元素上启动关键帧存在继承性
                             宽高、背景、定位属性被继承 */

@keyframes bear{
	0%{/*初始化*/
		left: 10px;
		top: -67px;
	}
	10%{
	    left: 764px;
	    top: -115px;
		background: url(../img/bear_1.png);
		background-size: 100% 100%;
		transform: rotate(135deg);
	}
	20%{
		left: 764px;
		top: 209px;
		background: url(../img/bear_2.png);
		background-size: 100% 100%;
		transform: rotate(160deg);
	}
	30%{
		left: 445px;
		top: 209px;
		background: url(../img/bear_3.png);
		background-size: 100% 100%;
		transform: rotate(200deg);
	}
	40%{
		left: 266px;
		top: 62px;
		background: url(../img/bear_4.png);
		background-size: 100% 100%;
		transform: rotate(235deg);
	}
	50%{
		left: 566px;
		top: 62px;
		background: url(../img/bear_5.png);
		background-size: 100% 100%;
		transform: rotate(360deg);
	}
	60%{
		left: 566px;
		top: 140px;
		background: url(../img/bear_6.png);
		background-size: 100% 100%;
		transform: rotate(480deg);
	}
	70%{
		left: 188px;
		top: 80px;
		background: url(../img/bear_7.png);
		background-size: 100% 100%;
		transform: rotate(720deg);
	}
	80%{
		left: 238px;
		top: 140px;
		background: url(../img/bear_8.png);
		background-size: 100% 100%;
		transform: rotate(800deg);
	}
	90%{
		left: 138px;
		top: 80px;
		background: url(../img/bear_9.png);
		background-size: 100% 100%;
		transform: rotate(900deg) scale(5);
	}
	100%{
		left: 338px;
		top: 130px;
		background: url(../img/bear_10.png);
		background-size: 100% 100%;
		transform: rotate(135deg);
	}
}